<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/asd.css" rel="stylesheet" />
		<link href="../css/asdd.css" rel="stylesheet" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<link rel="shortcut icon"
			href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico"
			type="image/x-icon" />
		<link rel="icon" type="image/svg+xml"
			href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg" />

		<link rel="stylesheet" href="../css/iconfont.css">
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}

			h5 {
				margin-top: 30px;
				font-weight: bold;
			}

			h5:first-child {
				margin-top: 15px;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body style="background-color: #ffbbbc;">
		<div style="background-color: #ffffff;">

			<div style="margin-top: 0px;height: 30px;line-height: 30px;padding-top: 5px;">
				<span class="icon iconfont" style="float: left;margin-left: 5px;font-size: 30px;line-height: 25px;">&#xe669;</span>
				<div style="float: left;margin-right: 20px;margin-left: 10px;">ANNE HATH</div>
				<span class="icon iconfont" style="float: right;margin-right: 10px;font-size: 25px;">&#xe657;</span>
			</div>

			<div style="height: 190px; margin-top: 20px; margin-left: 15px; margin-right: 15px; border-radius: 15px;">
				<div style="font-size: 15px;margin-top: 0px;margin-left: 20px;">
					总资产
				</div>
				<div style="min-height: 50px;">
					<div style="margin-top: 15px;float: left;font-size: 40px;margin-left: 20px;">36000</div>
					<a href="#"><span class="mui-icon mui-icon-arrowright"
							style="float: right;margin-top: 5px;font-size: 40px;margin-right: -10px;"></span></a>
				</div>

				<div style="height: 50px;width: 95%;margin: 0 auto;margin-top: 10px;border-bottom: solid 1px #000000;">
					<div style="margin-left: 10px; margin-top: 0px;font-size: 15px;float: left;">余额</div>
					<div style="margin-left: 10px; margin-top: 0px;font-size: 20px;float: left;">8000</div>
					<div style="margin-left: 20px; margin-top: 0px;font-size: 15px;float: left;">理财资产</div>
					<div style="margin-left: 10px; margin-top: 0px;font-size: 20px;float: left;">28000</div>
				</div>


				<div style="margin-top: 15px;">
					<button type="button" class="mui-btn mui-btn-outlined"
						style="border-radius: 10px;float: left;margin-left: 20px;width: 130px;">
						充值
					</button>
					<button type="button" class="mui-btn mui-btn-outlined"
						style="border-radius: 10px;float: right;margin-right: 20px;width: 130px;">
						提现
					</button>

				</div>

			</div>
		</div>


		<div style="background-color: #ffffff;min-height: 200px;margin-top: -5px;">

			<div style="margin-top: 10px;height: 40px;line-height: 50px;">
				<div style="float: left;font-size: 20px;margin-left: 10px;width: 10%;">
					<span class="icon iconfont" style="font-size: 28px;">&#xe609;</span>

				</div>
				<div style="float: left;margin-left: 0px;width: 45%;">今日收益</div>
				<a href="#"><span class="mui-icon mui-icon-arrowright"
						style="float: right;margin-top: 5px;font-size: 30px;margin-right: 10px;"></span></a>

			</div>

			<div>
				<div>
					<div class="chart" id="pieChart" style="margin-top: 10px;"></div>
				</div>
				<div style="margin: 0 auto;height: 30px;width: 100%;">

					<div style="width: 30%;float: left;margin-left: 25px;">
						<div style="float: left;font-size: 15px;margin-left: 15px;">基金 8.24</div>
					</div>
					<div style="width: 30%;float: left;margin-left: 5px;">
						<div style="float: left;font-size: 15px;margin-left: 15px;">股权 3.22</div>
					</div>
					<div style="width: 30%;float: left;margin-left: 5px;">
						<div style="float: left;font-size: 15px;margin-left: 15px;">债券 1.40</div>
					</div>
				</div>
			</div>
		</div>

		<div style="height: 90px;background-color: #ffffff;margin-top: 5px;">

			<div style="float: left;width: 25%;height: 100%;text-align: center;font-size: 10px;padding-top: 25px;">
				<span class="icon iconfont" style="font-size: 40px;padding-top: 0px;">&#xe641;</span>
				<div class="name">
					个人信息
				</div>
			</div>

			<div style="float: left;width: 25%;height: 100%;text-align: center;font-size: 10px;padding-top: 25px;">
				<span class="icon iconfont" style="font-size: 40px;padding-top: 0px;">&#xe67f;</span>
				<div class="name">
					资产统计
				</div>
			</div>

			<div style="float: left;width: 25%;height: 100%;text-align: center;font-size: 10px;padding-top: 25px;">
				<span class="icon iconfont" style="font-size: 40px;padding-top: 0px;">&#xe731;</span>
				<div class="name">
					收藏
				</div>
			</div>

			<div style="float: left;width: 25%;height: 100%;text-align: center;font-size: 10px;padding-top: 25px;">
				<span class="icon iconfont" style="font-size: 40px;">&#xe637;</span>
				<div class="name">
					交易记录
				</div>
			</div>

		</div>

		<div>

			<div style="background-color: #333333; margin-top: 5px;">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="http://www.baidu.com">
							热门问题
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="http://www.baidu.com">
							账户安全
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="http://www.baidu.com">
							邀请朋友
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="http://www.baidu.com">
							提高信用
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="http://www.baidu.com">
							借款须知
						</a>
					</li>
				</ul>
			</div>

		</div>

		<script src="../libs/echarts-all.js"></script>
		<script>
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '65%',
						center: ['50%', '50%'],
						data: [{
							value: 335,
							name: '待补充'
						}, {
							value: 310,
							name: '待补充'
						}, {
							value: 234,
							name: '待补充'
						}, {
							value: 135,
							name: '待补充'
						}, {
							value: 1548,
							name: '待补充'
						}]
					}]
				} : {}
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			/* var barChart = echarts.init(byId('barChart'));
			barChart.setOption(getOption('bar')); */
			// var lineChart = echarts.init(byId('lineChart'));
			// lineChart.setOption(getOption('line'));
			var pieChart = echarts.init(byId('pieChart'));
			pieChart.setOption(getOption('pie'));
			/* byId("echarts").addEventListener('tap',function(){
				var url = this.getAttribute('data-url');
				plus.runtime.openURL(url);
			},false); */
		</script>

	</body>
</html>
